﻿<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dropmenu</title>
    <script type="text/javascript" src="/Utilities/webdesk/webdesk.ui.core.js"></script>
    <script type="text/javascript" src="/Utilities/webdesk/scripts/ctrls.js"></script>
    <script type="text/javascript" src="/Utilities/webdesk/Scripts/Dropmenu.js"></script>
    <link rel="stylesheet" type="text/css" href="/Utilities/webdesk/Skins/win10/Dropmenu.css" />
    <style type="text/css">
    html,
    body {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;

    }

    body {
        overflow: hidden;
        background: url('/Utilities/webdesk/Skins/win10/bg.jpg');
        background-size: 100% 100%;
        background-color: #444;
    }

    h1 {
        font-size: 25px;
        color: #333;
        margin: 0px;
        display: block;
        overflow: hidden;
        height: 40px;
        font-weight: 900;
        white-space: nowrap;
        text-shadow: .2rem 0rem 1.2rem rgba(255, 255, 255, 1), -.2rem 0rem 1.2rem rgba(255, 255, 255, 1), 0rem .2rem 1.2rem rgba(255, 255, 255, 1), 0rem -.2rem 1.2rem rgba(255, 255, 255, 1);
    }

    h1 span {

        font-size: 15px;
        margin-left: 20px;
    }

    h1 b:before {
        content: "\a009";
        font-size: 30px;
        line-height: 40px;
        margin-right: 10px;
    }

    a.home {
        display: block;
        width: 120px;
        height: 40px;
        line-height: 40px;
        float: right;
        font-size: 14px;
        text-align: center;
        color: #333;
        text-decoration: none;
        font-weight: normal;
    }

    a.home:before {
        content: "\a020";
        font-size: 18px;
        line-height: 40px;
        margin-right: 2px;

        font-family: "webdesk_icon" !important;
    }

    #space {
        float: left;
        background-color: yellow;
        height: 200px;
        width: 200px;
        transition: width 0.3s, height 0.3s;
    }

    .intro-panel {
        margin: 10px;
        position: absolute;
        width: calc(100% - 60px);
        height: calc(100% - 140px);
        left: 0px;
        bottom: 0px;
        padding: 20px;
        overflow: auto;
        background-color: rgba(255, 255, 255, 0.6);
    }

    a {
        color: #000;
    }

    p {
        font-size: 15px;
        margin: 0px;
        padding: 0px;
        line-height: 25px;
    }

    table {
        --background-color: rgba(255, 255, 255, .6);
        width: calc(100% - 20px);
    }

    table th {
        background-color: rgba(255, 255, 255, .9);
        font-size: 16px;
    }

    table td {
        background-color: rgba(255, 255, 255, .6);
    }

    th,
    td {
        height: 25px;
        line-height: 25px;
    }

    td {
        padding: 0px 10px 0px 10px;
    }

    table tr td:first-child {
        text-align: center;
        padding: 0px;
    }

    table#eventTable tr td:first-child:before {
        content: 'on'
    }

    .intro-panel b {
        font-size: 16px !important;
        margin-top: 10px !important;
        display: block;
        margin: 10px 0px 10px 0px;
    }

    #dropmenu-area {
        background-color: rgba(200, 200, 200, 0.6);
    }
    </style>
</head>

<body oncontextmenu='return false'>
    <div style="height: 40px; padding-left: 20px;">
        <h1><b class="webdesk_icon"></b>Dropmenu.js 下拉菜单 <span>（无限树形分级，可自定义节点样式）</span></h1>
    </div>
    <div style='margin: 10px;width: calc(100% - 20px);height: calc(100% - 20px - 40px);'>
        <div id="dropmenu-left" style="position: absolute;left: 10px;top: 50px"></div>
        <div id="dropmenu-area" style="position: absolute;right: 10px;top: 50px"></div>
    </div>
    <div class="intro-panel">
        <b>简述：</b>
        <div>
            <ul>
                <li>支持无限级菜单分类</li>
                <li>可自定义节点样式，例如：粗体、斜体、颜色</li>
                <li>属性支持双向绑定，可监听</li>
                <li>节点事件可定义</li>
            </ul>
        </div>
        <div>
            <b>演示：</b>
            <div>
                <p>演示地址：<a href='http://webdesk.weisha100.cn/dropmenu.html' target="_blank">http://webdesk.weisha100.cn/dropmenu.html</a></p>
                <p>开源地址：<a href='https://github.com/weishakeji/WebdeskUI' target="_blank">https://github.com/weishakeji/WebdeskUI</a></p>
            </div>
            <b>示例：</b>
            <pre>
    var drop = $dropmenu.create({
        target: '#dropmenu-area',
        width: 120,height:30
    });
    drop.add(数据源);

</pre>
            <b>属性:</b>
            <div>
                <p>下表中，“可监听”的属性，可以通过watch()增加监听方法，类似Vue；“双向绑定”的意思是属性更改后，直接影响窗体样式。</p>
            </div>
            <table width="100%" border="0" cellspacing="1" cellpadding="1">
                <tr>
                    <th scope="col" width="200px">属性</th>
                    <th scope="col">说明</th>
                    <th scope="col" width="60px">可监听</th>
                    <th scope="col" width="80px">双向绑定</th>
                </tr>
                <tr>
                    <td>target</td>
                    <td>对象所在的html位置</td>
                    <td>√ </td>
                    <td></td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>根菜单栏的宽度</td>
                    <td>√ </td>
                    <td>√ </td>
                </tr>
                <tr>
                    <td>height</td>
                    <td>菜单项的高度，每一项的高度</td>
                    <td>√ </td>
                    <td>√ </td>
                </tr>
                <tr>
                    <td>plwidth</td>
                    <td>子菜单面板panel的宽度，第一级菜单面板会跟据根菜单宽度变化，子菜单宽度为width/datas.length</td>
                    <td>√ </td>
                    <td>√ </td>
                </tr>
                <tr>
                    <td>bind</td>
                    <td>是否对数据源双向绑定</td>
                    <td>√ </td>
                    <td>√ </td>
                </tr>
            </table>
            <div>
                <b>方法：</b>
                <div>
                    <p>下表只列出了常用公共方法，更多方法请参看源码。</p>
                </div>
                <table width="100%" border="0" cellspacing="1" cellpadding="1">
                    <tr>
                        <th scope="col" width="100px">方法</th>
                        <th scope="col">说明</th>
                        <th scope="col">参数</th>
                    </tr>
                    <tr>
                        <td>add()</td>
                        <td>添加树形数据，当属于bind为true时，数据源变动会直接影响界面</td>
                        <td>示例：{title:'',url:''}</td>
                    </tr>
                    <tr>
                        <td>getData()</td>
                        <td>通过id获取数据项</td>
                        <td>树形节点的id
                        </td>
                    </tr>
                </table>
                <b>事件：</b>
                <div>
                    <p>事件支持多播，即同一个事件可以添加多个方法。事件返回值仅限bool型，虽然可以返回其它类型或不返回，但最终都会转为bool型返回值。</p>
                    <p>当同一个事件中的多个方法，任一个返回false，则不再继续执行后续事件方法。如果不返回，默认是true。</p>
                </div>
                <table id="eventTable" width="100%" border="0" cellspacing="1" cellpadding="1">
                    <tr>
                        <th scope="col" width="80px">事件</th>
                        <th scope="col" width="150px">说明</th>
                        <th scope="col" width="100px">参数sender</th>
                        <th scope="col">参数e</th>
                    </tr>
                    <tr>
                        <td>load</td>
                        <td>组件加载完成</td>
                        <td>&nbsp;</td>
                        <td>e.event：事件名称，e.action：动作</td>
                    </tr>
                    <tr>
                        <td>data</td>
                        <td>当数据源变更时</td>
                        <td>同上</td>
                        <td>e.event：事件名称<br>
                            e.action：动作，默认与e.event同值<br>
                            e.target：响应事件的html元素，此处为窗体的html<br>
                            e.data：数据源</td>
                    <tr>
                        <td>click</td>
                        <td>节点点击</td>
                        <td>&nbsp;</td>
                        <td>e.data，当前节点数据项</td>
                    </tr>
                </table>
            </div>
        </div>
</body>
<script type="text/javascript">
var drop = $dropmenu.create({
    target: '#dropmenu-left',
    width: 300,
    height: 30
});


var data = {
    title: '控件说明',
    tit: '说明',
    ico: 'e72f',
    url: '/',
    marker: '',
    intro: '',
    childs: [{
        title: '功能简介',
        url: 'other/treemenu-1.html',
        intro: '基本功能简介',
        type: 'link',
        font: {
            color: 'green',
            bold: true
        }
    }, {
        title: '成员说明',
        ico: 'a010',
        childs: [{
            title: '属性',
            ico: 'a025',
            url: 'other/treemenu-2.html',
            childs: [{
                title: '测试子菜单'
            }, {
                title: '测试子菜单二'
            }]
        }, {
            title: '方法',
            ico: 'a023',
            url: 'other/treemenu-2.html'
        }, {
            title: '事件',
            ico: 'a024',
            url: 'other/treemenu-2.html',
            childs: [{
                title: '测试子菜单'
            }, {
                title: '测试子菜单二'
            }]
        }]
    }, {
        title: '数据源',
        url: 'other/treemenu-3.html'
    }],
    id: 0,
    pid: 0

};
drop.ondata(function(s, e) {
    console.log('数据源变更：' + e.data);
    drop2.add(e.data);
});

drop.add({ title: '首页', url: '/', type: 'link', ico: 'a020' });
drop.add(data);
var t = $dom.clone(data);
t.title = '克隆第一个菜单';
t.childs[0].title = '测试';
drop.add(t);

drop.onclick(function(s, e) {
    console.log('点击：' + e.data.title);
});
var drop2 = $dropmenu.create({
    target: '#dropmenu-area',
    width: 120,
    height: 30
});
</script>

</html>